<template>
    <div>
        <el-row>
            <el-col :xs="{span: 24}" :sm="{span: 4}">
                <el-input size="small" v-model="wordId"  placeholder="请输入留言ID">
                    <template slot="prepend">留言ID：</template>
                </el-input>
            </el-col>
            <el-col :xs="{span: 24}" :sm="{span: 4}">
                <el-input size="small" v-model="wordName" placeholder="请输入留言姓名">
                    <template slot="prepend">留言姓名：</template>
                </el-input>
            </el-col>
            <el-button size="small" type="primary" @click="secrchWords()" icon="el-icon-search">搜索</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="delGroup">删除</el-button>
        </el-row>
        <el-table :data="tableData5" ref="multipleTable"  @selection-change="selsChange" @row-click="handleRowChange" style="width: 100%;margin-top:20px;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="留言人">
                        <span>{{ props.row.word_name }}</span>
                    </el-form-item>
                    <el-form-item label="电话">
                        <span>{{ props.row.word_phone }}</span>
                    </el-form-item>
                    <el-form-item label="所在城市">
                        <span>{{ props.row.word_city }}</span>
                    </el-form-item>
                    <el-form-item label="留言时间">
                        <span>{{ props.row.worder_create_time }}</span>
                    </el-form-item>
                    <el-form-item label="留言内容">
                        <span>{{ props.row.word_content }}</span>
                    </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="留言ID" prop="word_id">
            </el-table-column>
            <el-table-column label="留言人" prop="word_name">
            </el-table-column>
            <el-table-column label="留言内容" prop="word_content">
            </el-table-column>
            <el-table-column label="留言时间" prop="worder_create_time">
            </el-table-column>
            <el-table-column
                label="操作"
                width="200"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-pagination
                :page-size="10"
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import 	Word 		from "@/service/word-service.js";
import 	Menu 		from "@/service/menu-service.js"
const 	_menu 	    = new Menu();
const 	_word 		= new Word();
export default {
    name:"words",
    data() {
        return{
            tableData5: [],
            wordId:'',
            wordName:'',
            total:10,
            currentPage :0
            
        }
    },
    created(){
        this.findSomeWords();
    },
    methods:{
        //这里是点击分页查询
        handleCurrentChange(val){
            this.currentPage = val-1
            this.findSomeNews();
        },
        // 这是查找部分留言
        findSomeWords(){
            const loading = this.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var reqparms = {
                wordId:this.wordId,
                wordName:this.wordName,
                pageSize:'10',
                currentPage:this.currentPage
            }
            _word.findSomeWords(reqparms).then((res)=>{
                this.tableData5 = res.data;
                if(res.count <= 10){
                    this.total = 10;
                }else{
                    this.total = res.count;
                }
                // 这里是判断数据是不空
                if(res.data.length == 0 && this.currentPage != 0){
                    this.currentPage--
                    this.secrchWords();
                }
                loading.close();
            },(err)=>{
                console.log(err)
            })
        },
        //这是查找留言
        secrchWords(){
            this.findSomeWords();
        },
        //  这是删除留言
        handleDelete(index,row){
            this.$confirm('您确定删除这条新闻, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 这里调用删除接口进行删除数据
                _word.deleteWords({"ids":row.word_id}).then((res)=>{
                    this.findSomeWords();
                },(err)=>{
                     this.$message.error(err);
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 获取多选参数
        handleRowChange(row, event, column) {
            this.$refs.multipleTable.toggleRowSelection(row)
        },
        //获取所有选中行的id组成的字符串，以逗号分隔
        delGroup() {
            this.$confirm('您确定删除选中的新闻, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var ids = this.sels.map(item => item.word_id).join();
                console.log(ids)
                // 这里调用删除接口进行删除数据
                _word.deleteWords({"ids":ids}).then((res)=>{
                    this.findSomeWords();
                },(err)=>{
                     this.$message.error(err);
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 当行数改变的时候修改参数的值
        selsChange(sels) {
            console.log(sels)
            this.sels = sels;
        },

    }
    
}
</script>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.el-form--inline .el-form-item__label{
    float: left;
}
.el-pagination{
    text-align: center;
    margin-top: 20px;
}
</style>
